<template>
<div class="main-info">
 <span>{{total}}  条事件</span>
  <div class="btn">
    <a :class="['btn-all',state == item?'actived':'']" v-for="(item,index) of btnInfo" :key="index" @click="changeBtn(item)">{{item}}</a>
  </div>
<button class="clearBtn" @click="clearBtn">清除已完成</button>
</div>
 </template>
<script>
  export default {
    name: "MainInfo",
    props: {
      total: Number,
    },
    data() {
      return {
        btnInfo: ["全部", "已完成", "未完成"],
        state: "全部",
      };
    },
    methods: {
      changeBtn(item) {
        this.state = item;
        this.$emit("ziChangeBtn", item);
      },
      clearBtn() {
        this.$emit("ziClearBtn");
      },
    },
  };
</script>
<style lang="stylus" scoped>
  @import '../../../assets/styles/theme.styl'
  @import '../../../assets/styles/mixins.styl'

  .main-info
    display flex
    justify-content space-between
    border-top 1px solid #999
    padding 5px
    box-sizing border-box

    .btn-all
      margin 6px
      border-radius 5px
      border 1px solid $yellow
      padding 3px

      &.actived
        background-color $yellow
        color #FFF
        border 1px solid #000

    .clearBtn
      border-radius 5px
      padding 3px
</style>

